<template>
    <div class="box">
        <title-a>
            我的订单
        </title-a>
        <div class="content">
            <ul>
                <li @click="toggle('全部')" :class="active =='全部'?'active':''">全部</li>
                <li @click="toggle('待付款')" :class="active =='待付款'?'active':''">待付款</li>
                <li @click="toggle('待发货')" :class="active =='待发货'?'active':''">待发货</li>
                <li @click="toggle('待收货')" :class="active =='待收货'?'active':''">待收货</li>
                <li @click="toggle('已完成')" :class="active =='已完成'?'active':''">已完成</li>
            </ul>
            <img src="/libs/imgs/shopCar1.jpg" alt="">
        </div>
    </div> 
</template>
<script>
export default {
    data(){
        return {
            active:'全部'
        }
    },
    methods:{
        toggle(name){
            this.active = name
        }
    }
}
</script>>
<style lang="scss" scoped>  
    .active{
        color: red;
        border-bottom: 1px solid red;
        box-sizing: border-box;
    }
    .box{
        padding-top: 50px;
        box-sizing: border-box;
        .content{
            height: 100%;
            ul{
                height: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding-left: 15px;
                padding-right: 15px;
                border-bottom: 1px solid #ccc;
                li{
                    flex: 1;
                    font-size: 14px;
                    text-align: center;
                    line-height: 40px;
                };
            }
            img{
                width: 100%;
                // height: 100%;
            }
        }
    }
</style>